<template>
    <div>
        <van-nav-bar title="商品分类" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div>
        <nut-searchbar v-model="value" clearable="true" clear-icon="CircleClose" background="linear-gradient(to right, #9866F0, #EB4D50)" input-background="#fff">
        </nut-searchbar>
    </div>
    <div>
        <nut-category :category="data.category" @change="change" >
            <nut-category-pane :categoryChild="data.categoryChild" @onChange="onChange" @click="toGoodsView"> </nut-category-pane>
        </nut-category>

    </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'; //路由器
const router = useRouter(); //获取到 router 对象，用于编程式跳转导航
const value = ref('');
// 返回上一页面
const onClickLeft = () => history.back();
//跳转到商品
function toGoodsView() {
    router.push("/goods");
}
//商品分类
import { reactive, toRefs, onMounted } from 'vue';
const data = reactive({
    categoryInfo: {},
    category: [{}],
    categoryChild: [{}]
});

onMounted(() => {
    setTimeout(() => {
        getData();
    }, 500);
});

const getData = () => {
    fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
        .then((response) => response.json())
        .then((res) => {
            const { categoryInfo, categoryChild } = res;
            data.categoryInfo = categoryInfo;
            data.category = categoryInfo.category;
            data.categoryChild = categoryChild;
        })
        .catch((err) => console.log('Oh, error', err));
};

const change = (index) => {
    data.categoryChild = [].concat(data.categoryInfo.category[index + 1].children);
};
const onChange = () => {
    console.log('当前分类数据');
};
</script>